<template>
 <div class>
      <el-card>
        <el-table :data="loadRecordData" border style="width: 100%">
          <el-table-column  align="center" width="80">
            <template slot="header">
             <el-button class="el-icon-circle-plus" @click.prevent="addRow()"></el-button>
            </template>
            <template slot-scope="scope">
              <el-button size="mini" type="danger" class="el-icon-remove"
              @click="handleDelete(scope.$index, scope.row)"></el-button>
          </template>
          </el-table-column>
          
          <el-table-column label="借款主体" align="center" width="140">
            <template slot-scope="scope">
              <el-input v-model="scope.row.subjectBorrow"></el-input>
            </template>
          </el-table-column>

          <el-table-column label="金融机构" align="center" width="140">
            <template slot-scope="scope">
              <el-input v-model="scope.row.finanIns"></el-input>
            </template>
          </el-table-column>

          <el-table-column label="合同金额(万元)" align="center" width="140">
            <template slot-scope="scope">
              <el-input v-model="scope.row.contAmount"></el-input>
            </template>
          </el-table-column>

          <el-table-column label="贷款余额(万元)" align="center" width="140">
            <template slot-scope="scope">
              <el-input v-model="scope.row.loanBalance"></el-input>
            </template>
          </el-table-column>

          <el-table-column label="放款时间" align="center">
            <template slot-scope="scope">
              <el-date-picker type="date" placeholder="选择日期" v-model="scope.row.landTime" style="width: 100%;" :editable="false"></el-date-picker>
            </template>
          </el-table-column>

          <el-table-column label="到期时间" align="center">
            <template slot-scope="scope">
              <el-date-picker type="date" placeholder="选择日期" v-model="scope.row.matuTime" style="width: 100%;" :editable="false"></el-date-picker>
            </template>
          </el-table-column>          

          <el-table-column label="抵押资产或保证方式" align="center">
            <template slot-scope="scope">
              <el-input type="textarea" v-model="scope.row.guarMode"></el-input>
            </template>
          </el-table-column>

          <el-table-column label="备注" align="center">
            <template slot-scope="scope">
              <el-input type="textarea" v-model="scope.row.remark"></el-input>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
 </div>
</template>
<script>
export default {
    data(){
        return {
          loadRecordData: [],
        }
      },
      mounted() {
      },
      methods: {
        //新增行
        addRow() {
          let user=JSON.parse(sessionStorage.getItem("user"));
          var list = {
            subjectBorrow: this.subjectBorrow,
            finanIns: this.finanIns,
            contAmount: this.contAmount,
            loanBalance: this.loanBalance,
            landTime: this.landTime,
            matuTime: this.matuTime,
            guarMode: this.guarMode,
            remark: this.remark,
          }
          this.loadRecordData.unshift(list)
        },
        //删除行
        handleDelete(index, row) {
            
              //删除数据库
              if(row.id){
                    this.$confirm('此操作将永久删除该条记录, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                      }).then(() => {
                        //删除
                        this.$api.formPost( 'biz/projLoanRecord/doRmById',{
                          id:row.id
                          }).then(res => {
                              if(res.retHead.code=="0000000"){
                                    this.$message({
                                      type: 'success',
                                      message: '删除成功!'
                                    });
                                    this.loadRecordData.splice(index, 1);
                                }else{
                                    this.$message({
                                        type: 'error',
                                        message: res.retHead.message
                                    });
                                }
                          });
                      }).catch(() => {
                        this.$message({
                          type: 'info',
                          message: '已取消删除'
                        });          
                      });
                  }else{
                    this.loadRecordData.splice(index, 1);
                  }
        },
        getdata(){
          return this.loadRecordData;
        },
        clearTable(){
          this.loadRecordData = [];
        }
      }
}
</script>